<script lang='ts' setup>
import router from '@/router';
import { ref, defineProps, onMounted } from 'vue';

const menus = ref([]);
const currMenu = ref('');

onMounted(() => {
  const routers = router.getRoutes();
  const adminMenus = routers?.filter(val => val.path.includes('/admin/'));
  menus.value = adminMenus.map(val => {
    const { meta, path, } = val;
    return { title: meta.title, path, }
  });

  currMenu.value = location.hash.split('#')[1];
})

function onLogo(): void {
  router.replace('/')
}

function changeHandler(active: string): void {
  router.replace(active);
  currMenu.value = active;
}

</script>
<template>
  <div class="menu">
    <t-menu theme="light" :value="currMenu" @change="changeHandler">
      <template #logo>
        <img height="28" src="@/assets/logo.png" alt="logo" @click="onLogo" />
      </template>
      <t-menu-item :value="item.path" v-for="item in menus"> {{ item.title }} </t-menu-item>
    </t-menu>
  </div>
</template>
<style lang='scss' scoped>
.menu {
  border-right: 1px rgba(51, 51, 51, 0.2) solid;
  height: 100%;
  padding-right: 30px;
  margin-right: 30px;
}
</style>